import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Select, Checkbox, Radio, Row, Col, Icon, Button, DatePicker, InputNumber, Message, Table, Upload, Modal} from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
import Region from '../../../../components/Region/RegionPC';
import BaseInfo from './baseInfo'
localStorage.renterFrontPic = JSON.stringify([]);
localStorage.renterBackPic = JSON.stringify([]);
let uuid = 0;
let nnid = 0;
localStorage.clear
const bankJson = [
  {
    name: "中国工商银行",
    code: "102"
  },
  {
    name: "中国农业银行",
    code: "103"
  },
  {
    name: "中国银行",
    code: "104"
  },
  {
    name: "中国建设银行",
    code: "105"
  },

  {
    name: "中信银行",
    code: "107"
  },
  {
    name: "中国光大银行",
    code: "108"
  },
  {
    name: "兴业银行",
    code: "114"
  }
]
let SignUpAdd = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading: false,
      imgList:[], // 图片列表提交参数
      rentContractList: [], // 租赁合约列表
      cardList:[],
      roomList: [], //房间数组
      //furnitList: [], // 家具清单dom
      //facilityList: [], // 家具清单数组
      //costList: [],  // 费用数据
      //costLen: [],
      //furnitLen: [],
      //meterList: [],
      freeArr: [],
      depositArr: [],
      rentItemList: [], // 租金包含
      tempFree: {},
      rentItemData: [],
      roomItemData: [],
      tempDeposit: {},
      isNote: 0, //是否短信通知
      priviewImage: null,
      priviewVisible: null,
      province: '110000', // 省
      city: '110100',  // 城市
      district: '110101', // 区域
      areaId: '110101',
      isYspay:-1,  //是否代扣
      rentContractArr: [],
      cardArr: [],
    }
  },

  componentDidMount() {
    this.fetchRoom();
    this.fetchRentItem();
    // this.fetchImg();
    this.setState({
      roomList: [this.props.location.state.roomId.toString()]
    })
  },
  // 处理数据,获取数组
  getArry (data) {
  　　let arry = [];
  　　let obj = {};
      let keyArry = [];
      for(let key in data) {
  　　　　let curKey = parseInt(key.replace(/[^0-9]+/g, '')); // 获取key里的数字标记
  　　　　let keyName =key.replace(/[^a-zA-Z]+/g, ''); // 获取 key里的字段名称
         if(!isNaN(curKey)){// 过滤掉不包含数字标记的
    　　　　obj = {
      　　　　'renterAddress':data[`${curKey}renterAddress`] || '',
      　　　　'renterCompany':data[`${curKey}renterCompany`] || '',
      　　　　'renterName':data[`${curKey}renterName`] || '',
      　　　　'renterNo':data[`${curKey}renterNo`] || '',
      　　　　'renterSex':data[`${curKey}renterSex`] || '',
              'renterPhone':data[`${curKey}renterPhone`] || '',
             'renterFrontPic': JSON.parse(localStorage[`renterFrontPic${curKey}`]) || [],
             'renterBackPic': JSON.parse(localStorage[`renterBackPic${curKey}`]) || [],
    　　　　}
            if(keyArry.indexOf(`${curKey}`) !== -1) {

            }else{
              keyArry.push(`${curKey}`);
              arry.push(obj);
            }
　　      }
  　　}
      return arry;
  },
  // 提交表单
  handleSubmit(e) {
   
    e.preventDefault();
    
    let rentItem = {rentItemList: this.state.rentItemList};
    let rentReserveId = {rentReserveId: this.props.location.state.rentReserveId ? this.props.location.state.rentReserveId : ''};
    
    let otherFeeList = {otherFeeList: this.setFieldArr(this.state.tempFree, this.state.freeArr)};
    let depositList = {depositList: this.setFieldArr(this.state.tempDeposit, this.state.depositArr)};
    let picList = {picList: this.state.cardList.concat(this.state.rentContractList)};
    let forms = this.props.form.getFieldsValue();
    let BaseInfoValue = this.refs.BaseInfo.getFieldsValue();
    let isNote = { isNote: this.state.isNote };
    let rooms = { roomList: this.state.roomList };
    let time = { startTime: Utils.formatDate(forms.startTime), endTime: Utils.formatDate(forms.endTime), nextRentTime: Utils.formatDate(forms.nextRentTime) };
    let params ;
    if (forms.isYspay == 1) {
      let regionCom=this.refs.region;
      let region = {province: this.state.province, provinceName:regionCom._selectedProvinceName,city: this.state.city,cityName:regionCom._selectedCityName};
      params = Object.assign({}, forms,rentReserveId, rentItem, region,picList, rooms, otherFeeList, depositList, time, isNote);
    } else {
      params = Object.assign({}, forms,rentReserveId, rentItem,picList, rooms, otherFeeList, depositList, time, isNote);
    }
    let flageBaseInfo = false; // BaseInfo校验是否通过
    let flageForm = false; // 当前form校验是否通过
    this.refs.BaseInfo.validateFields({ force: true },(errors, values) => {
      if (!!errors) {
        console.log('BaseInfo!!!');
        flageBaseInfo = false;
        return;
      }
      flageBaseInfo = true;
    });

    
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        flageForm = false;
        return;
      }
      flageForm = true;
    });
    if(flageForm && flageBaseInfo) { // 同时校验通过
      let otherRenterInfo = this.getArry(BaseInfoValue);
      params.otherRenterInfo = otherRenterInfo;
      params.mainRenterFrontPic = JSON.parse(localStorage.renterFrontPic); // 固定承租人 正面照片
      params.mainRenterBackPic = JSON.parse(localStorage.renterBackPic); // 固定承租人 反面照片
      params.renterAddress = BaseInfoValue.renterAddress;
      params.renterCompany = BaseInfoValue.renterCompany;
      params.renterName = BaseInfoValue.renterName;
      params.renterNo = BaseInfoValue.renterNo;
      params.renterPhone = BaseInfoValue.renterPhone;
      params.renterSex = BaseInfoValue.renterSex;
      console.log(params);
      this.setState({
        loading: true,
      });
      Utils.sendAjax({
        url: '/rent/contract/add',
        data: JSON.stringify(params),
        method: 'post',
        callback: (result) => {
          if (result.code === '200') {
           this.handleBack()
          } else {
            this.setState({
              loading: false,
            });
            Message.error(result.message, 10);
          }
        }
      });
    }

    
  },

  // 获取租金包含项
  fetchRentItem() {
    let _me = this;
    Utils.sendAjax({
      url: '/rent/include/list',
      method: 'post',
      data: JSON.stringify({rentContractId: 0}),
      callback: (result) => {
        if (result.code === '200') {
          let newStr = _me.state.rentItemData;
          result.data.forEach((item) => {
            let str = {};
            if (item.name) {
              str['label'] = item.name;
            }
            if (item.id) {
              str['value'] = item.id.toString();
            }
            newStr.push(str);
          })
          _me.setState({
            rentItemData: newStr
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    });
  },

  // 获取空置房间项
  fetchRoom() {
    let tenementId = this.props.location.state.tenementId;
    let roomId = this.props.location.state.roomId;
    let _me = this;
    Utils.sendAjax({
      url: '/vacancy/room/list',
      method: 'post',
      data: JSON.stringify({tenementId: tenementId, roomId: roomId}),
      callback: (result) => {
        if (result.code === '200') {
          let newStr = _me.state.roomItemData;
          result.data.forEach((item) => {
            let str = {};
            if (item.roomName) {
              str['label'] = item.roomName;
            }
            if (item.id) {
              str['value'] = item.id.toString();
            }
            newStr.push(str);
          })
          _me.setState({
            roomItemData: newStr
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    });
  },

  // // 获取图片
  // fetchImg() {
  //   let _me = this;
  //   let rentContractId = this.props.location.state.rentContractId;
  //   let params = {rentContractId: rentContractId};
  //   if (!rentContractId) {return }
  //   Utils.sendAjax({
  //     url: '/rent/contract/picList',
  //     data: JSON.stringify(params),
  //     method: 'post',
  //     callback: (result) => {
  //       if (result.code === '200') {
  //         _me.getImgList(result.data);
  //         _me.setImgUrl(result.data);
  //       } else {
  //         Message.error(result.message)
  //       }
  //     }
  //   });
  // },

  // 图片提交参数重构
  getImgList(img){
    let cardList = [];
    let rentContractList = [];
    let newState = [];
    img.forEach((item) => {
      let imgMaps = {
        type: item.type,
        url: item.url,
      };
      if (item.type == 'card') {
        cardList.push(imgMaps)
      }else if(item.type == 'rentContract'){
        rentContractList.push(imgMaps)
      }
      newState.push(imgMaps);
    })
    this.setState({
      imgList: newState,
      cardList: cardList,
      rentContractList: rentContractList,
    })
  },

  // 图片显示参数重构
  setImgUrl(img) {
    let cardList = [];
    let rentContractList = [];
    let newState = [];
    img.forEach((item) => {
      let length = item.url.split('/').length;
      let id = item.url.split('/')[length-1].split('.')[0];

      let imgMaps = {
        uid: id,
        type: item.type,
        status: 'done',
        url: Utils.apiServer + item.url,
        thumbUrl: Utils.apiServer + item.url,
      };
      if (item.type == 'card') {
        cardList.push(imgMaps)
      }else if(item.type == 'rentContract'){
        rentContractList.push(imgMaps)
      }
       newState.push(imgMaps);
    })
    this.setState({
      cardList: cardList,
      rentContractList: rentContractList,
      imgList: newState
    })
  },

  // 租金包含项选择函数
  handleCheck(filed, value) {
    let newRent = this.state.rentItemList;
    let newRoom = this.state.roomList;
    let key = value.target.value;
    if (value.target.checked) {
      if (filed == 'roomList') {
        newRoom.push(key);
      } else {
        newRent.push(key);
      }
    } else {
      if (filed == 'roomList') {
        let index = newRoom.indexOf(key);
        if (index > -1) {
          newRoom.splice(index, 1);
        }
      } else {
        let index = newRent.indexOf(key);
        if (index > -1) {
          newRent.splice(index, 1);
        }
      }
    }
    this.setState({
      rentItemList: newRent,
      roomList: newRoom
    })
  },
  //省市下拉
  changeAreaId(area) {
    selectedArea = String(area);
    var selectedProvince = selectedArea.substr(0, 2) + "0000";
    var selectedCity = selectedArea.substr(0, 4) + "00";
    this.setState({
      province: selectedProvince,
      city: selectedCity,
      areaId: area,
    })
  },
  // 添加一行费用项
  addFree() {
    if (uuid > 4) {
      return Message.warning('新增费用不能超过5项')
    }
    uuid++;
    let newArr = this.state.freeArr;
    newArr.push(uuid);
    this.setState({
      freeArr: newArr
    })
  },

  removeFree(k) {
    uuid--;
    let newArr = this.state.freeArr;
    let index = newArr.indexOf(k);
    if (index > -1) {
      newArr.splice(index, 1);
    }
    this.setState({
      freeArr: newArr
    })

  },

  // 添加一行费用项
  addDeposit() {
    if (nnid > 4) {
      return Message.warning('新增押金不能超过5项')
    }
    nnid++;
    let newArr = this.state.depositArr;
    newArr.push(nnid);
    this.setState({
      depositArr: newArr
    })
  },

  removeDeposit(k) {
    nnid--;
    let newArr = this.state.depositArr;
    let index = newArr.indexOf(k);
    if (index > -1) {
      newArr.splice(index, 1);
    }
    this.setState({
      depositArr: newArr
    })
  },

  rowKey(data) {
   return data.id;
  },

  handleFree(e) {
    let newStr = this.state.tempFree;
    let name = e.target.id;
    let value = e.target.value;
    newStr[name] = value;
    this.setState({
      tempFree: newStr
    })
  },


  handleDeposit(e) {
    let newStr = this.state.tempDeposit;
    let name = e.target.id;
    let value = e.target.value;
    newStr[name] = value;
    this.setState({
      tempDeposit: newStr
    })
  },

  setFieldArr(obj, len) {
    let newArr = [];
    len.map((k) => {
      let newObj = {};
      for (let o in obj) {
        let arr = o.split('-');
        let key = arr[0];
        if (arr[1] == k && arr[1] !== '') {
          newObj[key] = obj[o];
        }
      }
      if (!newObj) {return}
      newArr.push(newObj);
    })
    return newArr;
  },

  handleMessage(e) {
    let newStr = e.target.checked ? 1 : 0;
    this.setState({
      isNote: newStr
    })
  },

  handleCancel() {
    this.setState({
      priviewVisible: false,
    });
  },
  onfocus() {
    let forms = this.props.form.getFieldsValue();
    if(forms.reserveAmount == '0.00') {
      forms.reserveAmount == ''
     }
  },
  handleBack() {
    this.context.router.push('/landlord/rentManage/signUpOrder/list');
  },

  // 获取删除后 数据
  getList(list, url){
    let listIndex = '';
    list.forEach((item, index) => {
      if(item.url === url){
        listIndex = index;
      }
    });
    list.splice(listIndex, 1);
    return list
  },

  deleteImg(file) {
    let newArr = [];
    let rentContractPic = [];
    let cardPic = [];
    let imgs = this.state.imgList;
    let rentContractArr = this.state.rentContractArr;
    let cardArr = this.state.cardArr;
    
    imgs.forEach((img, index)=> {
      if (img.url && img.url !== file.url) {
        newArr.push(img)
      }
    })
      rentContractArr.forEach((i,index)=> {
      if(i.url[0] && i.url[0] !== file.url){
        rentContractPic.push(i)
      }
    })
      cardArr.forEach((i,index)=> {
      if(i.url[0] && i.url[0] !== file.url){
        cardPic.push(i)
      }
    })
    this.setState({
      imgList: newArr,
      rentContractArr: rentContractPic,
      cardArr: cardPic
    })
    this.setImgUrl(newArr);
  },
  hasBank(value){
    this.setState({
      isYspay:value
    })
  },
  render() {


    const { getFieldProps } = this.props.form;
    const initData = this.props.location.state;
    const forms = this.props.form.getFieldsValue();
    const _me = this;
    const rentOptions = this.state.rentItemData.map((item) => {
      return (
        <Checkbox key={`rent-${item.value}`} value={item.value} onChange={this.handleCheck.bind(this, 'rentItemList')}>{item.label}</Checkbox>
      )
    })

    const roomOptions = this.state.roomItemData.map((item) => {
      let checked = (item.value == this.props.location.state.roomId) ? true : false;

      return (
        <Checkbox  key={`rent-${item.value}`} disabled={checked} defaultChecked={checked} value={item.value} onChange={this.handleCheck.bind(this, 'roomList')}>{item.label}室</Checkbox>
      );
    })

    let freeArr = this.state.freeArr;
    let depositArr = this.state.depositArr;

    const formFree = freeArr.map((k) => {
      let feeName = `feeName-${k}`;
      let amount = `amount-${k}`;
      return (
        <div key={`free-${k}`}>
          <Input id={feeName} style={{width: 130, marginRight: 20}} onChange={this.handleFree} placeholder="请输入费用名称"/>
          <Input id={amount} style={{width: 130, marginRight: 20}} onChange={this.handleFree} placeholder="请输入费用金额"/>
          <span className="addfree-btn" onClick={this.removeFree.bind(this, k)}><Icon type="cross" /></span>
        </div>
      )
    });

    const formDeposit = depositArr.map((k) => {
      let depositName = `depositName-${k}`;
      let deposit = `deposit-${k}`;
      return (
        <div key={`deposit-${k}`}>
          <Input id={depositName} style={{width: 130, marginRight: 20}} onChange={this.handleDeposit} placeholder="请输入押金名称"/>
          <Input id={deposit} style={{width: 130, marginRight: 20}} onChange={this.handleDeposit} placeholder="请输入押金金额"/>
          <span className="addfree-btn" onClick={this.removeDeposit.bind(this, k)}><Icon type="cross" /></span>
        </div>
      )
    });
    let rentContract = {
      name: 'file',
      data: {nid: 'rentContract'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.rentContractList,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status;
        let rentContractArr = _me.state.rentContractArr;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          img.map((item)=> {
             imgList.push({type: 'rentContract', url: item})
          })
           rentContractArr.push({type: 'rentContract', url: img});
          if(files.fileList.length == rentContractArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        _me.deleteImg(file)
      }
    };

    // let card = {
    //   name: 'file',
    //   data: {nid: 'card'},
    //   listType: 'picture-card',
    //   action: Utils.apiServer + '/img/uploadifySave',
    //   multiple: true,
    //   fileList: this.state.cardList,
    //   beforeUpload(file) {
    //     const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
    //     const isSize = file.size > 5242880 ? false : true;
    //     if (!isJPG) {
    //       Message.error('只能上传jpg、png图片文件哦！', 10);
    //       return isJPG
    //     }
    //     if (!isSize) {
    //       Message.error('你选择的图片过大！', 10);
    //       return isSize
    //     }
    //   },
    //   onChange: function (files) {
    //     let imgList = _me.state.imgList;
    //     let status = files.file.status;
    //     let cardArr = _me.state.cardArr;
    //     if (status == 'done') {
    //       let file = files.file;
    //       let img = file.response ? file.response.data : '';
    //       img.map((item)=> {
    //         imgList.push({type: 'card', url: item})
    //       })
    //        cardArr.push({type: 'card', url: img});
    //       if(files.fileList.length == cardArr.length){
    //           _me.setImgUrl(imgList);
    //       }

    //     }
    //   },
    //   onPreview: (file) => {
    //     let arry = file.url.split('.')
    //     _me.setState({
    //       priviewImage: arry[0]+'_big.'+arry[1],
    //       priviewVisible: true,
    //     });
    //   },
    //   onRemove: (file) => {
    //     _me.deleteImg(file)
    //   }
    // };
    let bankItem = bankJson.map((item) => {
      return (
        <Option key={`item-${item.code}`} value={item.name}>{item.name}</Option>
      )
    })
    const startTime = initData.checkinTime ? new Date(initData.checkinTime.replace('-','/')) : null;
    let startTimeRules;
    if (startTime) {
      startTimeRules = getFieldProps('startTime', {
        initialValue: startTime,
        rules: [
          {required: true, type: 'date', message: '合约开始时间不可为空'},
        ]
      })
    } else {
      startTimeRules = getFieldProps('startTime', {
        initialValue: startTime,
        rules: [
          {required: true, type: 'date', message: '合约开始时间不可为空'},
        ]
      })
    }
    let BaseInfoProps = {
      isDisabled: false,
      flag: 'add'
      // cardList: this.state.cardList,
      // cardArr: this.state.cardArr,
      // imgList: this.state.imgList,

    }
    return (
      <div >
          { /*基本信息*/ }
          <div className="form-group">
            
            <BaseInfo ref="BaseInfo" {...BaseInfoProps}/>
          </div>
          <Form inline form={this.props.form}>
          <div className="form-group">
            {
              // <Row gutter={24}>
              //   <Col sm={8}>
              //     <FormItem label="租客姓名">
              //       <Input {...getFieldProps('renterName', {initialValue: initData.renterName,
              //         rules: [{ required: true,  message: '租客姓名不可为空' }]})} />
              //     </FormItem>
              //   </Col>
              //   <Col sm={8}>
              //     <FormItem label="身份证号码">
              //       <Input {...getFieldProps('renterNo', {initialValue: initData.renterNo,
              //         rules: [{ required: true,  message: '身份证号码不可为空' }, {validator: Utils.card}]})} />
              //     </FormItem>
              //   </Col>
              //   <Col sm={8}>
              //     <FormItem label="联系号码">
              //       <Input {...getFieldProps('renterPhone', {initialValue: initData.phone,
              //         rules: [{ required: true,  message: '联系号码不可为空' },
              //           {validator: Utils.phone}]})} />
              //     </FormItem>
              //   </Col>
              // </Row>
            }
            
            
            <Row gutter={24}>
              <Col sm={8}>

                <FormItem label="租赁方式">
                  <span>&nbsp;押&nbsp;</span>
                  <Select defaultValue="1" {...getFieldProps('depositPeriod', {initialValue: '1'})} style={{width: 60}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                  </Select>
                  <span>&nbsp;付&nbsp;</span>
                  <Input {...getFieldProps('rentPeriod', {initialValue : '1'})} style={{width: 60}}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="合约开始时间">
                  <DatePicker {...startTimeRules}
                    style={{width: 162}}/>
                </FormItem>
              </Col>

              <Col sm={8}>
                <FormItem label="合约结束时间">
                  <DatePicker {...getFieldProps('endTime',
                    {rules: [{ required: true, type:'date', message: '合约结束时间不可为空' }]})}
                    style={{width: 162}}/>
                </FormItem>
              </Col>
            </Row>
            {this.state.isYspay == 1 ?
              <div>
                <Row gutter={24}>
                  <Col sm={8}>
                    <FormItem label="是否需要代扣">
                      <Select  {...getFieldProps('isYspay', { initialValue: this.state.isYspay, rules: [{ required: true, message: '请选择是否代扣', type: 'number' }] }) } style={{ width: 162 }} onChange={this.hasBank}>
                        <Option value={1}>是</Option>
                        <Option value={-1}>否</Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col sm={8}>
                    <FormItem label="银行名称">
                      <Select defaultValue="102" {...getFieldProps('bankName', { rules: [{ required: true, message: '银行名称不可为空' }] }) } style={{ width: 162 }}>
                        {bankItem}
                      </Select>
                    </FormItem>
                  </Col>
                  <Col sm={8}>
                    <FormItem label="银行卡号">
                      <Input {...getFieldProps('accountNo', { rules: [{ required: true, message: '银行卡号不可为空' }] }) } />
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col sm={8}>
                    <FormItem label="银行开户名">
                      <Input {...getFieldProps('accountName', {
                        initialValue: '',
                        rules: [{ required: true, message: '银行开户名不可为空' }]
                      }) } />
                    </FormItem>
                  </Col>
                  <Col sm={16}>
                    <div className="ant-form-item">
                      <label className="ant-form-item-required">开户行地区</label>
                      <div className="">
                        <div className="ant-form-item-control ">
                          <Region areaId={this.state.areaId} ref="region" onAreaChange={this.changeAreaId} />
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
              </div>
              :
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="是否需要代扣">
                    <Select {...getFieldProps('isYspay', { initialValue: this.state.isYspay, rules: [{ required: true, message: '请选择是否代扣', type: 'number' }] }) } style={{ width: 162 }} onChange={this.hasBank}>
                      <Option value={1}>是</Option>
                      <Option value={-1}>否</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>

            }
            {
              // <Row gutter={24} className="pic-box">
              //   <Col sm={24} className="img-label-wrap">
              //     <FormItem
              //       label="证件图片">
              //       <Upload  {...card} >
              //         <div className="img-icon">
              //           <Icon type="plus"/>
              //           <h5>添加</h5>
              //         </div>
              //       </Upload>
              //     </FormItem>
              //   </Col>
              // </Row>
            }
            
            <Row gutter={24} className="pic-box">
              <Col sm={24} className="img-label-wrap">
                <FormItem
                  label="租赁合约">
                  <Upload {...rentContract} >
                    <div className="img-icon">
                      <Icon type="plus"/>
                      <h5>添加</h5>
                    </div>
                  </Upload>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={16} >
                <FormItem
                  label="备注">
                  <Input type="textarea" {...getFieldProps('remark',{initialValue : initData.remark})} style={{width: 360}}/>
                </FormItem>
              </Col>
            </Row>
          </div>
          
          <div className="form-group">
            <h3><span>费用信息</span></h3>
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="租赁房间" className="form-checkbox-wrapper" className="form-check">
                 <div className="form-checkbox-select"> {roomOptions} </div>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="合约租金">
                  <Input {...getFieldProps('rent', {initialValue: initData.rent ? initData.rent.toFixed(2) : '0.00',
                    rules: [{ required: true,  message: '合约租金不可为空' }, {validator: Utils.floatNum}]})} style={{width: 162}}/>
                  <span>元/月</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="订金">
                  <Input {...getFieldProps('reserveAmount', {
                    initialValue: initData.reserveAmount ? initData.reserveAmount.toFixed(2) : '0.00',
                    rules: [{validator: Utils.floatNum}]})} style={{width: 162}}/>
                  <span>元</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="合约押金">
                  <Input {...getFieldProps('deposit', {initialValue: '0.00',
                    rules: [{ required: true,  message: '合约押金不可为空' }, {validator: Utils.floatNum}]})} style={{width: 162}}/>
                  <span>元</span>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="中介费">
                  <Input {...getFieldProps('agencyFee',{initialValue: '0.00', rules: [{validator: Utils.floatNum}]})} style={{width: 162}}/>
                  <span>元</span>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="租金包含费用" className="form-checkbox-wrapper">
                  {rentOptions}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={12}>
                <FormItem label="其它费用">
                  <span className="addfree-btn" onClick={this.addFree}><Icon type="plus"/></span>
                </FormItem>
              </Col>
              <Col sm={12}>
                <FormItem label="其它押金">
                  <span className="addfree-btn" onClick={this.addDeposit}><Icon type="plus"/></span>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={10} offset={2}>
                <FormItem >
                  {formFree}
                </FormItem>
              </Col>
              <Col sm={10} offset={2}>
                <FormItem >
                  {formDeposit}
                </FormItem>
              </Col>
            </Row>
          </div>
          {/*
          <div className="form-group">
            <h3><span>家具清单</span></h3>
            <Row gutter={24}>
              <Col sm={23} offset={1}>
                <FormItem>
                  <ul>
                    {this.state.furnitList}
                  </ul>
                </FormItem>
              </Col>
            </Row>
          </div>*/}
          {/***
            <div className="form-group">
            <h3><span>收租设置</span></h3>
            /}
            {/*<Row gutter={24}>
              <Col sm={23} offset={1}>
                <h5 style={{marginBottom: 10}}>收费周期</h5>
                <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.costList} pagination={false}/>
                <div style={{marginTop: 20}}>
                 <Button type="primary" disabled>添加新的费用</Button>
                </div>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={23} offset={1}>
                <h5 style={{marginBottom: 10}}>抄写底表</h5>
                <Table rowKey={(data) => { return data.costTypeId}} columns={meterRead} dataSource={this.state.meterList} pagination={false}/>
              </Col>
            </Row>*/}
            {/*** 
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="收费提前通知">
                  <InputNumber min={1} max={1000000} defaultValue={1}  {...getFieldProps('rentNoticeDay', {initialValue:'1'})} />天
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem >
                  <Checkbox {...getFieldProps('isNote')}
                    checked={this.state.isNote == 1 ? true : false}
                    onChange={this.handleMessage} >短信通知租客</Checkbox>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="下次交租时间">
                  <DatePicker {...getFieldProps('nextRentTime',
                    {rules: [{ required: true, type: 'date', message: '下次交租时间不能为空' }]})} style={{width: 162}}/>
                </FormItem>
              </Col>
            </Row>
          </div>
           */}
          
          <Row gutter={24} style={{margin: 20}}>
            <Col sm={8} offset={3}>
              <FormItem >
                <Button type="primary" loading={this.state.loading} onClick={this.handleSubmit}>出租</Button>
                <Button style={{marginLeft: 20}} onClick={this.handleBack}>返回</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>

        <Modal visible={this.state.priviewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" src={this.state.priviewImage} width="500"/>
        </Modal>
      </div>
    );
  }
});

SignUpAdd = Form.create()(SignUpAdd);
export default SignUpAdd;